<template>
  <!--  快捷入口-->
  <div class="quickAccess">
    <div class="icon" @click="scrollLeft()"><i class="el-icon-arrow-left" ></i></div>
    <div style="display: flex;width: calc(100vw - 40px - 40px);overflow: hidden;" id="scrollable-element">
      <div v-for="(item,index) in pageList" class="page" @click="onClick(item)">
        <div style="font-size: 40px; color: #11A983"><i :class="item.icon"></i></div>
        <div style="white-space: nowrap;">{{item.name}}</div>
      </div>
    </div>
    <div class="icon" @click="scrollRight()"><i class="el-icon-arrow-right" ></i></div>
  </div>
</template>

<script>
export default {
  name: "quickAccess",
  data() {
    return {
      pageList:[
        {icon:'el-icon-tickets', name:'意向申报',value:'yxsb'},
        {icon:'el-icon-tickets', name:'项目立项',value:'xmlx'},
        {icon:'el-icon-tickets', name:'计划审批',value:'jhsp'},
        {icon:'el-icon-tickets', name:'项目预算',value:'xmys'},
        {icon:'el-icon-tickets', name:'合同新增',value:'htxz'},
        {icon:'el-icon-tickets', name:'风险登记',value: 'fxdj'},
        {icon:'el-icon-tickets', name:'问题新增',value: 'wtxz'},
        {icon:'el-icon-tickets', name:'整改报告',value: 'zgbg'},
        {icon:'el-icon-tickets', name:'项目结项',value: 'xmjx'},
      ]
    }
  },
  methods:{
    scrollLeft(){
      let element = document.getElementById('scrollable-element');
      element.scrollLeft -= 100; // 向左滚动100px
    },
    scrollRight(){
      let element = document.getElementById('scrollable-element');
      element.scrollLeft += 100; // 向右滚动100px
    },
    onClick(row){
      if(row.value=='htxz'){
        this.$confirm('您还没有权限新增操作！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        })
      }else{
        this.$emit('showFormModal',row)
      }
    }
  }
}
</script>

<style scoped>
.quickAccess{
  display: flex;
  align-items: center;
  height: 71px;
  margin-bottom: 25px;
}
.icon{
  width: 40px;
  text-align: center;
  z-index: 1;
}
.icon :hover{
  cursor: pointer;
}
.page{
  margin: 15px 25px;
  text-align: center;
}
.page :hover{
  cursor: pointer;
}
</style>
